<template>
  <view class="card-empty" v-if="echartDataEmpty">
    <ve-empty marginTop="12" text="根据您的筛选统计数据时发现暂无数据，请重新筛选"></ve-empty>
  </view>
  <qiun-data-charts
    v-else
    type="demotype"
    :eopts="opts"
    :chartData="echart_series"
    :echartsH5="true"
    :echartsApp="true"
    :reload="reload"
    @getShawBarInfo="getShawBarInfo"
  />
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { ref, watch } from 'vue'

  const props = defineProps({
    echartData: {
      type: Array,
      default: () => [],
    },
    reload: {
      type: Boolean,
      default: false,
    },
    echartOpt: {
      type: Object,
      default: () => ({
        zoomValue: 4,
        gridLeft: 20,
        dataZoom0Show: true,
        preventDefaultMouseMove: false,
      }),
    },
  })

  const emits = defineEmits(['getShawBarInfo'])

  const echart_series = ref<any>({})
  const opts: any = {
    grid: {
      top: '10%',
      left: 20,
      right: 20,
      bottom: '15%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'none',
    },
    legend: {
      data: ['收入', '支出', '总收益'],
      bottom: 0,
      left: 'center',
      padding: [5, 5, 25, 5],
      textStyle: {
        fontSize: 16,
      },
    },
    xAxis: [
      {
        type: 'category',
        data: [],
        axisLine: {
          show: true,
          lineStyle: {
            color: '#eee',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#666',
          margin: 20,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位: 元',
        minInterval: 1,
        nameTextStyle: {
          color: '#666',
          align: 'right',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#eee',
          },
        },
        axisLabel: {
          color: '#666',
          margin: 20,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: [5, 10],
            dashOffset: 5,
          },
        },
      },
    ],
    dataZoom: [
      {
        type: 'slider',
        realtime: true,
        height: 14, //组件高度
        moveHandleSize: 15,
        left: '4%', //左边的距离
        right: '4%', //右边的距离
        bottom: '0%', //下边的距离
        xAxisIndex: [0],
        showDataShadow: false,
        show: true, // 是否展示
        fillerColor: 'rgba(2,110,252,1)', // 滚动条颜色
        borderColor: 'rgba(17, 100, 210, 0.12)',
        backgroundColor: 'rgba(232,244,255,0.51)', //两边未选中的滑动条区域的颜色
        handleSize: 0, //两边手柄尺寸
        showDetail: false, //拖拽时是否展示滚动条两侧的文字
        moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
        startValue: 0, // 从头开始。
        endValue: 4,
      },
      {
        type: 'inside', // 支持内部鼠标滚动平移
        show: false,
        startValue: 0, // 从头开始。
        endValue: 4,
        zoomLock: true, //是否只平移不缩放
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: false, // 开启滚轮平移
        moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
        preventDefaultMouseMove: false, // 鼠标移动能触发数据窗口平移
      },
    ],
  }

  const getShawBarInfo = (e: any) => {
    emits('getShawBarInfo', e)
  }

  const echart_bar_option = {
    type: 'bar',
    stack: 'total',
  }
  const echart_line_option = {
    type: 'line',
    showSymbol: false,
  }

  const income_data = ref<any>({
    ...echart_bar_option,
    name: '收入',
    data: [],
    itemStyle: {
      color: '#1890FF',
      borderRadius: 2,
    },
  })
  const expense_data = ref<any>({
    ...echart_bar_option,
    name: '支出',
    data: [],
    itemStyle: {
      color: '#86DF6C',
      borderRadius: 2,
    },
  })
  const line_data = ref<any>({
    ...echart_line_option,
    name: '总收益',
    data: [],
    itemStyle: {
      color: '#EC6571',
    },
  })

  const echartDataEmpty = ref(true)
  const minArray = ref<any>([])
  const maxArray = ref<any>([])
  watch(
    () => props.echartData,
    (newVal) => {
      echartDataEmpty.value = true
      opts.dataZoom[0].show = props.echartOpt.dataZoom0Show
      opts.dataZoom[1].preventDefaultMouseMove = props.echartOpt.preventDefaultMouseMove
      opts.grid.left = props.echartOpt.gridLeft
      opts.dataZoom[0].endValue = props.echartOpt.zoomValue
      opts.dataZoom[1].endValue = props.echartOpt.zoomValue
      opts.xAxis[0].data = []
      income_data.value.data = []
      expense_data.value.data = []
      line_data.value.data = []
      echart_series.value = {}

      const hasData = newVal?.some((item: any) => {
        const hasBarData = item.barDataList?.some((barItem: any) => barItem.totalRevenueAmount != 0 || barItem.totalExpenditureAmount != 0)
        const hasLineData = item.lineDataList?.some((lineItem: any) => lineItem.totalProfitAmount != 0)
        return hasBarData || hasLineData
      })

      if (!hasData) {
        return
      } else {
        echartDataEmpty.value = false
      }

      if (newVal.length > 0) {
        newVal.forEach((item: any) => {
          // 横坐标
          opts.xAxis[0].data.push(dayjs(item.date).format('MM-DD'))

          // 柱状图数据
          item.barDataList.forEach((barItem: any) => {
            maxArray.value.push(barItem.totalRevenueAmount)

            income_data.value.data.push({
              date: item.date,
              value: barItem.totalRevenueAmount,
              infoList: item.infoList,
              totalRevenueAmount: item.totalRevenueAmount,
              totalExpenditureAmount: item.totalExpenditureAmount,
              totalProfitAmount: item.totalProfitAmount,
              label: {
                show: barItem.totalRevenueAmount == 0 ? false : true,
                position: 'top',
                color: '#000',
              },
            })
          })

          item.barDataList.forEach((barItem: any) => {
            minArray.value.push(barItem.totalExpenditureAmount)

            expense_data.value.data.push({
              date: item.date,
              value: -barItem.totalExpenditureAmount,
              infoList: item.infoList,
              totalRevenueAmount: item.totalRevenueAmount,
              totalExpenditureAmount: item.totalExpenditureAmount,
              totalProfitAmount: item.totalProfitAmount,
              label: {
                show: barItem.totalExpenditureAmount == 0 ? false : true,
                position: 'bottom',
                color: '#000',
              },
            })
          })

          // 折线图数据
          item.lineDataList.forEach((lineItem: any) => {
            maxArray.value.push(lineItem.totalRevenueAmount)
            minArray.value.push(lineItem.totalExpenditureAmount)

            line_data.value.data.push({
              date: item.date,
              value: lineItem.totalProfitAmount,
              infoList: item.infoList,
              totalRevenueAmount: item.totalRevenueAmount,
              totalExpenditureAmount: item.totalExpenditureAmount,
              totalProfitAmount: item.totalProfitAmount,
            })
          })
        })

        opts.yAxis.min = -Math.max(...minArray.value) - 500
        opts.yAxis.max = Math.max(...maxArray.value) + 500
        console.log('opts', opts)

        echart_series.value = JSON.parse(
          JSON.stringify({
            series: [income_data.value, expense_data.value, line_data.value],
          }),
        )
      }
    },
    {
      immediate: true,
      deep: true,
    },
  )
</script>

<style scoped></style>
